<template>
	<view class="page">
		<!-- #ifdef MP-WEIXIN-->
			<view class="head"><text @click="tolist">差额流水</text></view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN-->
			<my-navbar leftText="差额管理"  @leftClick="back" @rightClick="tolist" rightText="差额流水" rightColor="#ADAEAF"></my-navbar>
		<!-- #endif -->
		<view class="content">
			<image style="width: 146rpx;height: 146rpx;" :src="img"></image>
			<text class="num">￥{{balance}}</text>
			<u-alert-tips v-if="info" class="tips" type="error" :title="info" ></u-alert-tips>
			<!-- <text>{{info}}</text> -->
			<view :class="Number(balance)>=0 ? 'btn flex-center dis' : 'btn flex-center'" @click="toPayFor">结清差额</view>
		</view>
	</view>
</template>

<script>
	import { $https } from "@/static/js/request.js";
	export default {
		data() {
			return {
				img:'https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/12/E9ENDT7losqjXW6e9tl33R8Xie5mBdebGI4xiXFe.svg',
				balance:null,
				info:'',
			};
		},
		onShow(){
			this.getData();
		},
		methods:{
			getData(){
				$https('GETN','getBalance',{},res=>{
					this.balance = res.data.data.balance;
					if(res.data.data.status==1){
						this.info = res.data.data.msg;
					}
				})
			},
			tolist(){
				uni.navigateTo({
					 url: '/subpack/user/balance/balance_list'
				});
			},
			back(){
				// #ifdef H5
					window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
			toPayFor(){
				if(Number(this.balance) < 0){
					uni.navigateTo({
						 url: `/subindex/shopcart/pay_for?balance=${this.balance}`
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	.head{
		height: 88rpx;
		width: 100%;
		padding:0 30rpx;
		color:#ADAEAF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top:172rpx;
		img{
			width:134rpx;
			height:134rpx;
		}
		.tips{
			margin-top:50rpx;
			width:600rpx;
		}
		.num{
			font-size: 56rpx;
			color:#191919;
			font-weight: 600;
			margin-top:38rpx;
		}
		.btn{
			color:#fff;
			width: 566rpx;
			height: 88rpx;
			background: $dgreen;
			box-shadow: 0px 2px 14px 2px rgba(0,0,0,0.2);
			border-radius: 48rpx;
			margin-top:428rpx;
			font-size: 26rpx;
		}
		.dis{
			background:rgb(204, 204, 204);
		}
	}
}
</style>
